<template>
  <div class="flex-between">
    <div class="flex-between-item">
      <img
        src="@/assets/images/modal2.svg"
        style="margin-right: 8px; height: 14px"
      />
      <span style="font-size: 14px">
        {{ titleState }}{{ title || metaTitle }}
      </span>
    </div>
    <slot></slot>
    <i v-if="showClose" @click="cancel" class="el-icon-close close_style"></i>
  </div>
</template>
<script>
export default {
  name: "DullModal",
  props: {
    title: {
      type: String | Boolean | Number,
      default: "",
    },
    setLook: {
      default: "",
    },
    showClose:{
      type: Boolean,
      default: true
    }
  },
  computed: {
    metaTitle() {
      return this.$route.meta && this.$route.meta.title;
    },
    titleState() {
      return this.setLook === 0
        ? "查看-"
        : this.setLook === 1
        ? "新增-"
        : this.setLook === 2
        ? "修改-"
        : "";
    },
  },
  methods: {
    cancel() {
      this.$emit("close");
    },
  },
};
</script>

<style scoped lang="scss">
.flex-between {
  color: #496dff;
  background-color: #fff !important;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f2f2f2;
  padding-bottom: 20px;
  .flex-between-item {
    display: flex;
    align-items: center;
  }
  .close_style {
    border-radius: 50%;
    cursor: pointer;
    font-size: 12px;
    background-color: #496dff;
    color: #fff;
    padding: 3px;
    &:hover {
      background-color: #597afd;
    }
  }
}
</style>
